<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
    <div id="app">

        <h1>{{msg}}</h1>

        <!--
           js中事件(event): 事件三要素:
                                事件源: 发生特定动作html标签
                                事件:   发生特定动作事件  单击事件 onclick ondblclick onmouseover onmouseout keyup  keydown .....
                                监听器:  事件处理程序  一般在js中是事件处理函数  function(){}


           v-on 指令:  作用: 用来给页面中标签绑定事件用的  语法: 在对应标签上使用v-on:事件名="事件处理函数名"

        -->
        <button v-on:click="test">vue中事件绑定</button>

    </div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//用来指定vue实例作用范围
        data:{    //用来给vue实例绑定数据
            msg:"hello vue"
        },
        methods:{ //用来vue实例绑定一些列函数 方法
            test : function(){  //定义一个test函数
                alert('vue中test');
            }
        }
    });
</script>